<template>
  <div class="webrtc-connection">
    <div class="connection-main">
      <div class="connection-status">
        <span class="status-indicator" :class="statusClass"></span>
        <span class="status-text">{{ statusText }}</span>
      </div>
      
      <div class="connection-controls">
        <button 
          v-if="!isConnected"
          class="connect-btn"
          @click="connect"
          :disabled="isConnecting"
        >
          开始连接
        </button>
        <button 
          v-else
          class="disconnect-btn"
          @click="disconnect"
        >
          断开连接
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import WebRTCService from '../services/WebRTCService.js'

// Props
const props = defineProps({
  autoConnect: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['connection-status-change', 'error'])

// 响应式数据
const isConnected = ref(false)
const isConnecting = ref(false)
const statusClass = ref('status-disconnected')
const statusText = ref('未连接')

// 生命周期钩子
onMounted(() => {
  // 设置连接状态变化回调
  WebRTCService.setOnConnectionStatusChange((status) => {
    handleConnectionStatusChange(status)
  })
  
  // 如果设置了自动连接，则尝试连接
  if (props.autoConnect) {
    connect()
  }
})

onUnmounted(() => {
  // 组件卸载时清理资源
  disconnect()
  
  // 移除回调
  WebRTCService.setOnConnectionStatusChange(null)
})

// 处理连接状态变化
function handleConnectionStatusChange(status) {
  isConnecting.value = status === 'connecting' || status === 'checking'
  isConnected.value = status === 'connected'
  
  // 更新状态样式和文本
  if (status === 'connected') {
    statusClass.value = 'status-connected'
    statusText.value = '已连接'
  } else if (status === 'disconnected') {
    statusClass.value = 'status-disconnected'
    statusText.value = '未连接'
  } else if (status === 'connecting' || status === 'checking') {
    statusClass.value = 'status-connecting'
    statusText.value = '连接中...'
  } else if (status === 'failed') {
    statusClass.value = 'status-disconnected'
    statusText.value = '连接失败'
  }
  
  // 发送状态变化事件
  emit('connection-status-change', status)
}

// 开始连接
async function connect() {
  try {
    isConnecting.value = true
    await WebRTCService.createConnection()
  } catch (error) {
    console.error('WebRTC连接失败:', error)
    emit('error', error)
    // 重置连接状态
    isConnecting.value = false
    handleConnectionStatusChange('disconnected')
  }
}

// 断开连接
function disconnect() {
  WebRTCService.closeConnection()
  handleConnectionStatusChange('disconnected')
}

// 暴露方法给父组件
defineExpose({
  connect,
  disconnect,
  isConnected
})
</script>

<style scoped>
.webrtc-connection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.connection-main {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  background-color: rgba(158, 158, 158, 0.1);
  color: #9E9E9E;
  flex-shrink: 0;
}

.connection-status.status-connected {
  background-color: rgba(0, 200, 83, 0.1);
  color: #00C853;
}

.connection-status.status-connecting {
  background-color: rgba(255, 193, 7, 0.1);
  color: #FFC107;
}

.connection-status.status-disconnected {
  background-color: rgba(158, 158, 158, 0.1);
  color: #9E9E9E;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.status-connected {
  background-color: #28a745;
}

.status-disconnected {
  background-color: #dc3545;
}

.status-connecting {
  background-color: #ffc107;
  animation: pulse 1.5s infinite;
}

.status-text {
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}

.connection-controls {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.connection-controls button {
  padding: 8px 20px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.connect-btn {
  background-color: #2196F3;
  color: white;
}

.connect-btn:hover {
  background-color: #1976D2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.disconnect-btn {
  background-color: #F44336;
  color: white;
}

.disconnect-btn:hover {
  background-color: #D32F2F;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.7;
  }
}

/* STUN服务器选择框样式 */
.stun-checkbox-container {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-left: 4px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.form-check-input {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.form-check-label {
  font-size: 12px;
  color: #666;
  cursor: pointer;
  user-select: none;
  margin: 0;
  white-space: nowrap;
}

.form-check-input:checked + .form-check-label {
  color: #2196F3;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .webrtc-connection {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .connection-controls {
    flex-direction: column;
    gap: 8px;
  }
  
  .stun-checkbox-container {
    margin-top: 5px;
    padding-left: 0;
  }
}
</style>